<template>
  <base-content>
    <q-page class="cc-admin q-pa-sm">
      <div class="col bg-white shadow-2 q-pa-md">
        <div class="row items-center justify-start q-mb-md">
          <q-item class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>账号：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-input outlined dense square clearable v-model="searchForm.username" placeholder="账号" />
            </q-item-section>
          </q-item>
          <q-item class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>姓名：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-input outlined dense square clearable v-model="searchForm.realname" placeholder="姓名" />
            </q-item-section>
          </q-item>
          <q-item v-show="showQuery" class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>邮箱：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-input outlined dense square clearable v-model="searchForm.email" placeholder="邮箱" />
            </q-item-section>
          </q-item>
          <q-item v-show="showQuery" class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>电话：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-input outlined dense square clearable v-model="searchForm.phone" placeholder="电话" />
            </q-item-section>
          </q-item>
          <q-item v-show="showQuery" class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>状态：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-select clearable outlined dense emit-value v-model="searchForm.status" map-options :options="userStatus" class="col" placeholder="状态" />
            </q-item-section>
          </q-item>
          <q-item v-show="showQuery" class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>工号：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-input outlined dense square clearable v-model="searchForm.workNo" placeholder="工号" />
            </q-item-section>
          </q-item>
          <q-item v-show="showQuery" class="col-xl-2 col-md-3 col-sm-6 col-xs-12">
            <q-item-section class="col-3 text-right gt-sm">
              <q-item-label>职务：</q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <q-select clearable outlined dense emit-value v-model="searchForm.post" map-options :options="sysPosition" class="col" placeholder="职务" />
            </q-item-section>
          </q-item>
          <q-item class="col-xl-2 col-md-3 col-sm-6 col-xs-12 q-pr-sm">
            <q-item-label class="col-12 text-right row no-wrap justify-center">
              <q-btn unelevated label="查询" no-wrap color="primary" class="q-mr-sm no-border-radius" :loading="loading" @click="query()">
                <template v-slot:loading>
                  <q-spinner-ios class="on-center" />
                </template>
              </q-btn>
              <q-btn outline unelevated label="重置" no-wrap class="q-mr-sm no-border-radius" color="secondary" @click="searchReset" />
              <q-btn-dropdown v-model="showQuery" persistent dense flat color="primary" :label="tableLabel" @before-show="show" @before-hide="hide"></q-btn-dropdown>
            </q-item-label>
          </q-item>
        </div>
        <q-table
          flat
          color="primary"
          class="cross_table"
          separator="cell"
          :columns="columns"
          :data="dataList"
          row-key="id"
          :pagination.sync="pagination"
          :visible-columns="group"
          :rows-per-page-options="[10, 20, 50, 100]"
          :loading="loading"
          selection="multiple"
          :selected.sync="selected"
        >
          <template #top-left>
            <div class="q-pa-md q-gutter-sm">
              <q-btn :label="$t('add')" color="info" icon="add" @click="add" />
              <q-btn :disable="selected.length === 0" :label="$t('edit')" color="primary" icon="edit" @click="edit" />
              <q-btn :disable="selected.length === 0" color="warning" :label="$t('batchDelete')" @click="showConfirm()" icon="mdi-delete-variant" />
              <q-btn :loading="importing" :label="$t('import')" color="positive" icon="mdi-cloud-upload-outline" @click="importExcel">
                <q-uploader
                  auto-upload
                  ref="excelUploader"
                  :max-files="1"
                  class="hidden"
                  :url="importExcelUrlFull"
                  field-name="file"
                  :headers="[{ name: 'authorization', value: null }]"
                  @uploaded="importedExcel"
                />
              </q-btn>
              <q-btn :loading="exporting" :label="$t('export')" icon="mdi-cloud-download-outline" color="secondary" @click="exportExcel('用户列表')" />
            </div>
          </template>
          <template #top-right="table">
            <q-btn-group outline>
              <q-btn outline no-wrap :label="$t('refresh')" color="primary" icon="refresh" />
              <q-btn
                outline
                color="primary"
                :label="$t('switchFullscreen')"
                no-wrap
                v-if="$q.screen.gt.md"
                @click="table.toggleFullscreen"
                :icon="table.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
              />
              <q-btn-dropdown outline color="primary" :label="$t('customizeColumn')" v-if="$q.screen.gt.md" icon="view_list">
                <q-list>
                  <q-item v-show="showQuery" tag="label" v-for="item in columns" :key="item.name">
                    <q-item-section avatar>
                      <q-checkbox v-model="group" :val="item.name" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>{{ item.label }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
              <!-- <q-btn outline no-wrap v-if="$q.screen.gt.sm" label="导入" icon="mdi-cloud-upload-outline" :loading="importing" color="primary" @click="importExcel">
              <q-uploader
                auto-upload
                ref="excelUploader"
                :max-files="1"
                class="hidden"
                :url="importExcelUrlFull"
                field-name="file"
                :headers="[{ name: 'authorization', value: $store.state.User.authorization }]"
                @uploaded="importedExcel"
              />
            </q-btn> -->
              <!-- <q-btn outline no-wrap v-if="$q.screen.gt.sm" :loading="exporting" label="导出" icon="mdi-cloud-download-outline" color="primary" @click="exportExcel('用户列表')" /> -->
            </q-btn-group>
          </template>
          <template #body-cell-avatar="props">
            <q-td key="avatar" :props="props">
              <q-avatar v-if="props.row.avatar">
                <img style="width: 30px height: 30px" :src="imagePath(props.row.avatar)" />
              </q-avatar>
            </q-td>
          </template>
          <template #body-cell-sex="props">
            <q-td key="sex" :props="props">{{ getDictLabel(sex, props.row.sex) }}</q-td>
          </template>
          <template #body-cell-status="props">
            <q-td key="status" :props="props">{{ getDictLabel(userStatus, props.row.status) }}</q-td>
          </template>
          <template #body-cell-delFlag="props">
            <q-td key="delFlag" :props="props">{{ getDictLabel(delFlag, props.row.delFlag) }}</q-td>
          </template>
          <template #body-cell-activitiSync="props">
            <q-td key="activitiSync" :props="props">{{ getDictLabel(activitiSync, props.row.activitiSync) }}</q-td>
          </template>
          <template #body-cell-post="props">
            <q-td key="post" :props="props">{{ getDictLabel(sysPosition, props.row.post) }}</q-td>
          </template>
          <template #body-cell-opt="props">
            <q-td :props="props" :auto-width="true">
              <q-btn flat round dense color="primary" icon="mdi-key" @click="change(props.row)">
                <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                  {{ $t('userItem.reset_paw') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat round dense color="primary" icon="engineering" @click="editUserRole(props.row)">
                <!-- <q-tooltip>分配角色</q-tooltip> -->
                <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                  {{ $t('userItem.assign_roles') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat round dense color="primary" icon="edit" @click="edit(props.row)">
                <!-- <q-tooltip>编辑</q-tooltip> -->
                <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                  {{ $t('edit') }}
                </q-tooltip>
              </q-btn>
              <btn-del :label="props.row.nickname" @confirm="del(props.row)" />
            </q-td>
          </template>
        </q-table>
      </div>
      <q-dialog ref="changePassWord" maximized flat persistent position="right">
        <q-form @submit="changePassWord" class="dialog_card">
          <div class="view_title justify-between q-px-md">
            修改密码
            <q-btn dense outline round size="sm" icon="clear" v-close-popup />
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-12">
              <h5>用户账号：</h5>
              <q-input outlined readonly dense v-model="selectUser.username" />
            </div>
            <div class="col-12">
              <h5>用户姓名：</h5>
              <q-input outlined readonly dense v-model="selectUser.realname" />
            </div>

            <div class="col-6">
              <h5><q-icon name="star" color="red" />密码：</h5>
              <q-input outlined dense type="password" v-model="password" :rules="[v => !!v || '不可以为空']" />
            </div>
            <div class="col-6">
              <h5><q-icon name="star" color="red" />确认密码：</h5>
              <q-input outlined dense type="password" v-model="confirmpassword" :rules="[v => !!v || '不可以为空']" :error="!isValid">
                <template v-slot:error>两次输入密码不一致！</template>
              </q-input>
            </div>
          </div>
          <div class="row justify-end q-pa-md">
            <q-btn outline color="white" text-color="primary" label="取消" v-close-popup />
            <q-btn unelevated color="primary" class="on-right" label="提交" type="submit" />
          </div>
        </q-form>
      </q-dialog>

      <q-dialog ref="dialog" position="right">
        <q-form @submit="submit" class="dialog_card column">
          <h5 class="view_title justify-between q-px-md">
            {{ editType }}用户
            <q-btn dense outline round icon="clear" size="sm" v-close-popup />
          </h5>
          <q-scroll-area class="col">
            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <div class="col-6">
                <h5><q-icon name="star" color="red" />登录账号：</h5>
                <q-input outlined dense square clearable v-model="form.account_name" type="text" :rules="[requiredTest]" />
              </div>
            </div>
          </q-scroll-area>
          <div class="row justify-end q-pa-md">
            <q-btn outline color="primary" label="取消" v-close-popup />
            <q-btn unelevated color="primary" class="on-right" label="提交" type="submit" />
          </div>
        </q-form>
      </q-dialog>

      <listselect ref="listselectDialog" :unselectedList="unselectedRoleList" :selectList="selectedRoleList" :msg="selectTitle" @saveSelect="setRoles" />
      <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
    </q-page>
  </base-content>
</template>

<script>
import { IndexMixin } from 'boot/mixins'
import { getDictLabel } from 'boot/dictionary'
import confirm from 'components/Crud/confirm'
import listselect from 'components/Crud/listselect'
import { requiredTest } from 'boot/inputTest'
import BaseContent from '../../components/BaseContent/BaseContent'

export default {
  name: 'SysUser',
  mixins: [IndexMixin],
  components: {
    confirm,
    listselect,
    BaseContent
  },
  mounted () {
    // this.initDict()
  },
  computed: {
    isValid () {
      return this.confirmpassword === this.password
    },
    getScreenGtMd () {
      if (this.$q.screen.gt.md) {
        this.show()
      } else {
        this.hide()
      }
      return this.$q.screen.gt.md
    }
  },
  watch: {
    getScreenGtMd (n, o) { }
  },
  data () {
    return {
      // screenGtMd: this.$q.screen.gt.md,
      // showQuery: true,
      // tableLabel: '展开',
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.SERVER_URL}${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.SERVER_URL}${process.env.BASE_URL}/sys/common/static`,
      columns: [
        { name: 'index', align: 'center', label: '序号', field: 'index' },
        { name: 'account_name', align: 'left', label: '账号', field: 'account_name' },
        { name: 'nickname', align: 'left', label: '姓名', field: 'nickname' },
        { name: 'roleName', align: 'left', label: '用户角色', field: row => row.role.name },
        { name: 'deptName', align: 'left', label: '用户部门', field: row => row.dept.name },
        { name: 'avatar', align: 'left', label: '头像', field: 'avatar' },
        { name: 'sex', align: 'left', label: '性别', field: 'sex' },
        { name: 'email', align: 'left', label: '电子邮件', field: 'email' },
        { name: 'phone', align: 'left', label: '电话', field: 'phone' },
        { name: 'status', align: 'left', label: '状态', field: 'status' },
        { name: 'workNo', align: 'left', label: '工号', field: 'workNo' },
        { name: 'post', align: 'left', label: '职务', field: 'post' },
        { name: 'opt', align: 'center', label: '操作', field: 'id', classes: 'position: sticky' }
      ],
      dataList: [
        { id: 1, index: 1, account_name: 'admin', nickname: '张三', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 2, index: 2, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 3, index: 3, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 4, index: 4, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 5, index: 5, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 6, index: 6, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 7, index: 7, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 8, index: 8, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 9, index: 9, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 10, index: 10, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 11, index: 11, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 12, index: 12, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 13, index: 13, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 14, index: 14, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 },
        { id: 15, index: 15, account_name: 'test', nickname: '李四', role_id: 1, role: { name: '超级管理员', id: 1 }, dept_id: 1, dept: { name: '远航科技', id: 1 }, email: 'qwe123@163.com', phone: '021-837923', avatar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg', status: 10 }
      ],
      sex: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
      userStatus: [{ value: 1, label: '正常' }, { value: 2, label: '冻结' }],
      delFlag: [{ value: '0', label: '正常' }, { value: '1', label: '已删除' }],
      activitiSync: [{ value: '1', label: '同步' }, { value: '0', label: '不同步' }],
      sysPosition: [],
      selectUser: {},
      password: '',
      confirmpassword: '',
      selectTitle: '',
      roleList: [],
      unselectedRoleList: [],
      selectedRoleList: [],
      url: {
        list: '/sys/user/list',
        add: '/sys/user/add',
        edit: '/sys/user/edit',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        importExcelUrl: '/sys/user/importExcel',
        setUserRoles: '/sys/user/setUserRoles'
      },
      queryOnPresenterCreated: false
    }
  },
  methods: {
    requiredTest,
    getDictLabel,
    importAvatar () {
      this.$refs.avatarUploader.pickFiles()
    },
    importedAvatar ({ xhr }) {
      const response = JSON.parse(xhr.responseText)
      if (response.success) {
        this.form.avatar = response.message
        this.$q.notify('上传成功')
      } else {
        this.$q.notify({
          color: 'red',
          message: '上传失败'
        })
      }
      this.$refs.avatarUploader.removeUploadedFiles()
    },
    imagePath (src) {
      let path = ''
      if (src) {
        if (src.startsWith('http')) {
          return src
        }
        path = `${this.imgUrl}/${src}`
      }
      return path
    },
    show () {
      this.showQuery = true
      this.tableLabel = '收起'
    },
    hide () {
      this.showQuery = false
      this.tableLabel = '展开'
    },
    initDict () {
      this.$axios.get('/sys/dictItem/selectItemsByDefId?defId=sysPosition').then((r) => {
        this.sysPosition = r
      })
      this.$axios.get('/sys/dictItem/selectItemsByDefId?defId=sysRole').then((r) => {
        this.roleList = r
      })
    },
    change (row) {
      this.password = ''
      this.confirmpassword = ''
      this.selectUser = row
      this.$refs.changePassWord.show()
    },
    changePassWord () {
      this.$axios.put('/sys/user/changePassword', {
        confirmpassword: this.confirmpassword,
        password: this.password,
        username: this.selectUser.username
      }).then((r) => {
        this.$info(r.message)
        this.$refs.changePassWord.hide()
      })
    },
    editUserRole (row) {
      this.selectUser = row
      const { userRoleIdList } = row
      this.unselectedRoleList = []
      this.selectedRoleList = []
      this.selectTitle = `用户[${row.realname}]分配角色`
      this.roleList.forEach((role) => {
        if (userRoleIdList.includes(role.value)) {
          this.selectedRoleList.push(role)
        } else {
          this.unselectedRoleList.push(role)
        }
      })
      this.$refs.listselectDialog.show()
    },
    setRoles (roleList) {
      const selectedRoles = []
      if (roleList && roleList.length > 0) {
        roleList.forEach((role) => {
          selectedRoles.push(role.value)
        })
      }
      this.$axios.put(`${this.url.setUserRoles}?userId=${this.selectUser.id}&selectedRoles=${selectedRoles.join(',')}`)
        .then((r) => {
          if (r.success) {
            this.$refs.listselectDialog.hide()
            this.query()
          }
          this.$info(r.message)
        })
    }
  }
}
</script>
